<template>
  <div class="tea-detail-container" v-if="tea">
    <div class="tea-detail-main">
      <img :src="tea.img || `/src/assets/tea/longjing.jpg`" :alt="tea.name" class="tea-detail-img" />
      <div class="tea-detail-info">
        <h2>{{ tea.name }}</h2>
        <div class="tea-detail-price">¥{{ tea.price }}</div>
        <div class="tea-detail-type">类型：{{ tea.type }}</div>
        <div class="tea-detail-stock">库存：{{ tea.stock }}</div>
        <div v-if="tea.description" class="tea-detail-desc">{{ tea.description }}</div>
        <div class="tea-detail-buy">
          <label>年份：</label>
          <select v-model="year">
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
            <option value="2025">2025</option>
          </select>
          <label>日期：</label>
          <input type="date" v-model="date" style="width:140px" />
          <label>份数：</label>
          <input type="number" v-model.number="portion" min="1" max="10" style="width:60px" />
          <label>购买数量：</label>
          <input type="number" v-model.number="quantity" min="1" :max="tea.stock" style="width:60px" />
          <button @click="addToCart">加入购物车</button>
        </div>
      </div>
    </div>
  </div>
  <div v-else>加载中...</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from '../api/axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const tea = ref<any>(null);
const quantity = ref(1);
const year = ref('2023');
const date = ref('2025-08-15');
const portion = ref(1);

const fetchTea = async () => {
  try {
    const res = await axios.get(`/tea/${route.params.id}`);
    tea.value = res.data;
  } catch {
    router.push('/');
  }
};

const addToCart = () => {
  if (!tea.value) return;
  const cart = JSON.parse(localStorage.getItem('cart') || '[]');
  // 按品质选项区分购物车条目
  const exist = cart.find((item: any) => item.id === tea.value.id && item.year === year.value && item.date === date.value && item.portion === portion.value);
  if (exist) {
    exist.quantity += quantity.value;
  } else {
    cart.push({ ...tea.value, quantity: quantity.value, year: year.value, date: date.value, portion: portion.value });
  }
  localStorage.setItem('cart', JSON.stringify(cart));
  alert('已加入购物车');
};

onMounted(fetchTea);
</script>

<style scoped>
.tea-detail-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 32px;
  background: #fffbe6;
  border-radius: 16px;
  box-shadow: 0 2px 16px #ffd591;
}
.tea-detail-main {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.tea-detail-img {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 2px 8px #ffd591;
}
.tea-detail-info {
  flex: 1;
}
.tea-detail-price {
  color: #ff6600;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 12px;
}
.tea-detail-type, .tea-detail-stock {
  font-size: 16px;
  margin-bottom: 8px;
}
.tea-detail-desc {
  font-size: 15px;
  color: #888;
  margin-bottom: 16px;
}
.tea-detail-buy {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tea-detail-buy select,
.tea-detail-buy input {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ffd591;
}
.tea-detail-buy button {
  background: #ff6600;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
}
</style>
